<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn" value="">获取验证码</button>
</body>
<script>
    // 获取元素 注册事件
    let btn = document.getElementById('btn');
    btn.onclick = function () {
        // 点击按钮之后 按钮禁用
        // console.log(1)
        btn.disabled = true;
        // 声明一个变量
        let second = 10;
        // 设置一个定时器
        btn.innerText = '获取验证码(' + second + ')';
        let IntervalID = setInterval(function () {
            second--;
            btn.innerText = '获取验证码(' + second + ')';
            // 如果倒计时为 0 , 清除定时器 改变按钮的属性
            if (second === 0) {
                clearInterval(IntervalID);
                btn.disabled = false;
                btn.innerText = '获取验证码';
            }
        }, 1000)

    }
</script>

</html>